<script lang="ts" setup>
import { ref } from "vue";

const modalVisible = ref(false);
</script>

<template id="c4a1bcef-d1fb-45d5-b114-d15c7dbfcf57">
  <umi-container id="c12cd1a7-dabe-4389-b92d-a29ccdec6dd1" padding="16px" :gap="16" min-height="calc(100vh - 64px)" bg-color="#f2f2f2">
    <umi-breadcrumb id="de18619e-6f0a-422e-a911-f33b608e4383" :items="['活动管理', '模板广场']"></umi-breadcrumb>
    <umi-card id="e6b2b4cb-d163-40ac-a45f-6076d521262f" :bordered="false">
      <umi-container id="42543397-6b55-4243-b7d8-10ad3d949cc4" :gap="16">
        <umi-container id="082ab567-4dc3-4fb1-b37c-c3eae4a53903" direction="horizonal" justify="between">
          <umi-radio-group id="57f37ece-4924-4f4c-b0c1-fa272598733f">
            <umi-radio id="8a14a5f4-292f-4f21-a5c4-5754a4236e9a">推荐排序</umi-radio>
            <umi-radio id="e929237d-38e7-432f-a13d-a01b50dc8b21">最新上架</umi-radio>
            <umi-radio id="d0e138b0-6e4c-489e-ab04-a6e18306b281">使用最多</umi-radio>
          </umi-radio-group>
          <umi-button id="785eebba-4ad4-4ace-99e9-7c27ecd7296a" type="primary" @click="$router.push({ name: 'ActivityEditor' })">新增模板</umi-button>
        </umi-container>
        <umi-grid id="37926354-7421-40c0-9495-c5cab2f9ad08" :cols="6" :col-gap="16" :row-gap="16">
          <umi-grid-item id="7c6b88ef-90f8-4154-b21e-8a2d626fc2cf" v-for="_ in 12">
            <umi-action-overlay id="6c314993-b95e-43da-bc3a-fe44127797e0">
              <umi-card id="a6ecb0bf-98ed-4780-adeb-c50e920cb5bf">
                <template id="0922c9ef-0740-4bf3-a726-711f487c81a2" #cover>
                  <umi-image id="65645075-1ef3-431a-b347-51e248f0ea3a" :height="160"></umi-image>
                </template>
                <umi-space id="a70352b3-5cc2-47c7-a9ad-4d7db68fdbe4" direction="vertical" :size="10">
                  <umi-text id="59ecb02f-9b6a-44dc-8f03-865d0da09dcb" bold>单商品膨胀券秒杀</umi-text>
                  <umi-text id="0645005c-d429-4b99-a7bc-1f4712c73619" ellipsis="100%" :line-clamp="2">此玩法助力商家拉新促活：消费者领券后邀人助力膨胀面额，膨胀券可用于秒杀商品，高效带动用户转化与销量。</umi-text>
                </umi-space>
              </umi-card>
              <template id="3fa9777d-0c6d-4998-8f45-160bc398d736" #body>
                <umi-space id="9b284f72-34a2-4b1c-82e4-bb5d35386774" direction="vertical" :size="16" align="center">
                  <umi-text id="a0f03e81-6ff0-47e3-8f44-c03d33f9b6d6" color="#fff">扫码预览</umi-text>
                  <umi-qrcode id="ef9d161f-75eb-4990-9c60-f3ad01b47ea5"></umi-qrcode>
                  <umi-space id="0749fdee-8027-4a95-b1f5-da0f31e6bcae">
                    <umi-button id="12e9229a-acfc-419b-97b9-6ec9abe4a946" type="primary" size="mini" @click="$router.push({ name: 'ActivityEditor' })">我要创建</umi-button>
                    <umi-button id="ec087293-391f-4629-97fa-ed655bbb9d4e" type="primary" size="mini" @click="modalVisible = true">我要编辑</umi-button>
                  </umi-space>
                </umi-space>
              </template>
            </umi-action-overlay>
          </umi-grid-item>
        </umi-grid>
        <umi-pagination id="bea26923-a743-450d-893b-b8a0d006f3ae"></umi-pagination>
      </umi-container>
    </umi-card>
    <umi-modal id="8da479f4-9c05-465e-ada8-361fd5244a85" :width="500" v-model:visible="modalVisible">
      <umi-form id="d0ae8509-c382-4760-96af-2844d7ec6510">
        <umi-form-item id="f9174f34-05fd-4f5b-be18-26989b939a1d" label="模板标题" :required="true">
          <umi-input id="a348aef9-df3c-4a5d-b87a-39825e1a61f6" placeholder="请输入模板标题"></umi-input>
        </umi-form-item>
        <umi-form-item id="b20ca94e-cb70-4460-ab3a-f255b616f2b6" label="模板描述" :required="true">
          <umi-input id="a348aef9-df3c-4a5d-b87a-39825e1a61f6" placeholder="请输入模板描述"></umi-input>
        </umi-form-item>
        <umi-form-item id="eef1990f-bcee-4f6c-8eae-6de2bea6a533" label="模板封面" :required="true"><umi-upload id="09c3227b-b697-40ec-ac67-7b1eadf304b3"></umi-upload></umi-form-item>
      </umi-form>
    </umi-modal>
  </umi-container>
</template>
